<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >  
<title>韩剧详情</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<style>
	.jishu{
		width: 10%;
		border: 1px solid #2692ff;
		height: 50px;
		width:50px;
		text-align: center;
		line-height: 50px;
		border-radius: 100%;
		margin-left: 15px;
		margin-top: 10px;
		float: left;
		color: #999999
	}
</style>
</head>
<body style="background-color: white;">
<header class="hui-header">
    <div id="hui-back"></div>
</header>
<div class="hui-wrap">
	<div class="hui-img-list">
        <ul>
            <li style="padding: 0px;">
                <a id="first" href="">
                    <img id="imgs" src="img/imglist/1.jpg" style="width:100%;height:300px" />
                </a>
            </li>
        </ul>
    </div>
    <div style="background:#FFF;height: 50px;" class="hui-flex">
        <div class="hui-scroll-news" style="margin: 0px;height: 50px;" id="scrollnew1">
            <!--<div class="hui-scroll-news-items" style="height: 50px;"><a href="https://www.baidu.com"><img src="img/banner.png" style="height: 100%;width: 100%;" /></a></div>
            <div class="hui-scroll-news-items" style="height: 50px;"><a href="https://www.baidu.com"><img src="img/banner.png" style="height: 100%;width: 100%;" /></a></div>-->
        </div>
    </div>
	<div style="width: 100%;">
		 <div style="padding: 15px;width: 80%;float: left;">
		 	<h1 style="font-size: 18px;" id="name"></h1>
		 </div>
		 <div style="width: 10%;float: left;margin-top: 13px;" onclick="shows();">
		 	<i class="hui-icons hui-icons-down2" id="show" ></i>
		 </div>
	</div>
	<p style="margin-top: -25px;padding: 15px;">
		<span style="font-size: 18px;color: #fa533d;" id="fen"></span>
		<span style="font-size: 18px;color: #999999;margin-left: 20px;" id="types">3000播放次数</span>
	</p>
	<p style="margin-top: -25px;padding: 15px;color: #999999;display: none;" id="jj">
	</p>
	<div id="jishus">
		
	</div>
	<div style="width: 100%;padding: 15px;">
		<h1 style="font-size: 18px;">相关推荐<span style="float: right;margin-right: 10%;color: #EF4F4F;" onclick="refush();"><i class="hui-icons hui-icons-loading" style="color: #FF3A31;"></i>换一换</span>
			
		</h1>
    <style>
	    #list2 li{width:50%; float:left; 0px;}
	    #list2 .hui-img-list-content{padding:5px; padding-bottom:10px;}
	    #list2 h1{font-size:14px;}
    </style>
    <div class="hui-img-list" id="list2" style="padding:10px 5px;">
        <ul id="lists">
        </ul>
    </div>
	</div>
</div>
<script src="js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	hui.scrollNews(scrollnew1, 2000);
	var page = 1;
	var htmls = '<li>\n' +
        '                <a onclick="info(~);">\n' +
        '                    <img src="~" style="width:196px;height:282px"/>\n' +
        '                    <div class="hui-img-list-content">\n' +
        '                        <h1>~</h1>\n' +
        '                        <p>~</p>\n' +
        '                    </div>\n' +
        '                </a>\n' +
        '            </li>';
    var imgList = '<div class="hui-scroll-news-items" style="height: 50px;"><a href="~"><img src="~" style="height: 100%;width: 100%;" /></a></div>';
    hui.getJSON(
	    rootPath+'/vedio/getVedio/'+localStorage.getItem("vedioId"),
	    function(msg){
	        document.getElementById("imgs").src=msg[0].faceImg;
	        $("#name").html(msg[0].title);
	        var maps = new Array();
	        maps = msg[0].rate.split(".");
	        if(!maps[1]){
	        	maps[1]=0;
	        }
	        $("#fen").html(maps[0]+'.<span style="color: #fa533d;"">'+maps[1]+'</span>分');
	        $("#types").html(msg[0].vedioTypeId);
	        $("#jj").html(msg[0].description);
	        var html ='<div class="jishu"><a href="~">~</a></div>';
	        var all = "";
	        var first = "";
	        for(var i=0;i<msg[1].length;i++){
	        	first = msg[1][0].url;
	        	all = all + html.replace("~",msg[1][i].url).replace("~",msg[1][i].episode);
	        }
	       	document.getElementById("first").href=first;
	        $("#jishus").html(all);
	        var allImgs = "";
	        for(var i=0;i<msg[2].length;i++){
	        	allImgs = allImgs + imgList.replace("~",msg[2][i].advertUrl).replace("~",rootPath+msg[2][i].url);
	        }
	        $("#scrollnew1").html(allImgs);
	    },
	    function(e){
	        hui.iconToast('读取消息失败', 'warn');
	    }
	);
	list();
	function list(){
		hui.postJSON(
	        rootPath+'/vedio/vedioList',
	        {
	        	"pageSize":4,
	        	"pageIndex":page
	        },
	        function(res){
	            hui.closeLoading();
	            var all = '';
	            for(var i = 0; i < res.rows.length; i++){
	           		all = all + htmls.replace("~",res.rows[i].id).replace("~",res.rows[i].faceImg).replace("~",res.rows[i].title.toString().substr(0,4)+"...").replace("~",res.rows[i].description.toString().substr(0,10)+"...");
	            }
	            hui('#lists').html(all);
	        },
	        function(){
	            hui.closeLoading();
	            hui.upToast('连接服务器失败！');
	            hui.endRefresh();
	        }
		);
	}
	function shows(){
		var val = $("#show").attr("class");
		if(val.indexOf("down")>-1){
			$("#jj").show();
			$("#show").attr("class","hui-icons hui-icons-up2");
		}else{
			$("#jj").hide();
			$("#show").attr("class","hui-icons hui-icons-down2");
		}
	}
	function refush(){
		page++;
		list();
	}
</script>
</body>
</html>